<template>
    <div>
        <!-- <h1>首页</h1> -->
        <el-container>
            <el-header height="130px">
                <HomeHeader></HomeHeader>
            </el-header>

            <el-container>
                <el-aside width="300px">
                    <HomeAside></HomeAside>
                </el-aside>
                <el-main>
                    <div v-if="show">
                        <h1>志龙</h1>                                     
                        <home-current></home-current>
                    </div>
                    <router-view v-else></router-view>
                </el-main>

            </el-container>

        </el-container>
    </div>
</template>

<script>

import HomeHeader from "@/components/home/HomeHeader"
import HomeAside from "@/components/home/HomeAside"
import HomeCurrent from "@/components/home/HomeCurrent"
export default {
    components: {
        HomeHeader,
        HomeAside,
        HomeCurrent,

    },
    data(){
        return{
            show:false,
        }
    },
    watch:{
        $route(value){
            // console.log(value);
          this.showHome(value);
        }
    },
    mounted(){
        this.showHome(this.$route);
    },
    methods:{
        showHome(value){
            if(value.path ==="/home"){
                this.show = true;
            }
        }
    }
    
}
</script>

<style lang="scss" scoped>
div {
    .el-container {
        background-color: aqua;

        .el-container {
            .el-aside {
                background-color: aliceblue;
            }

            .el-main {
                background-color: aquamarine;
            }
        }
    }
}
</style>
